<template>
  <div class="center-top">
    <div class="bar">
      <ul>
        <li class="pulll_left counter">
          <p>
            <countTo :startVal="0" :endVal="12341234" :duration="3000"/>
          </p>
          <p>2020年总收入情况</p>
        </li>
        <li class="pulll_left counter">
          <p>
            <countTo :startVal="0" :endVal="5487987" :duration="3000"/>
          </p>
          <p>2020年总支出情况</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import countTo  from 'vue-count-to';
export default {
  components: {
    countTo
  },
  data() {
    return {
      config: {
        waitTime: 3000,
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 45,
          },
          {
            name: "漯河",
            value: 29,
          },
        ],
      },
    };
  },

  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.center-top {
  width: 100%;
  height: 100%;
  .bar {
    // background: rgba(101, 132, 226, 0.1);
    padding: 10px;
    height: 100%;
    ul{
      display: flex;
      justify-content: space-around;
      align-items: center;
      height:100%;
       li {
        padding: 10px 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        p{
          &:nth-of-type(1){
            font-size: 36px;
            color: #ffeb7b;
            font-weight: bold;
            font-family: electronicFont;
            margin-bottom: 20px;
          }
        }
      }
    }
   
  }
}
</style>